<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <!-- 要放到导航栏里面 -->
    <h3>{{ isCollapse ? "后台" : "通用后台管理系统" }}</h3>
    <!-- 观察数据,我们发现name是唯一标识 -->
    <!-- 查看文档,index是唯一标识 -->
    <el-menu-item @click="clickItem(item)"  v-for="item in noChildren" v-if="item.path!='/mall'" :key="item.name" :index="item.name"
      class="el-menu-items">

      <template v-if="item.path!='/mall'">
        <!-- 这里是字体图标,用模板字符串拼接,注意要动态绑定 -->
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
        <!-- <div class="margin-top-class"></div> -->
      </template>

    </el-menu-item>
    <div class="margin-top-class"></div>

    <!-- 创建一个el-submit -->
    <el-menu-item index="4" class="el-menu-item el-menu-itempassword" @click="changeMenu('/passenger')">
      <i class="el-icon-user-solid"></i>
      <span slot="title">乘客</span>
    </el-menu-item>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span slot="title">司机</span>
      </template>
      <el-menu-item index="2-1" @click="changeMenu(`/driver_management`)">
        <i class="el-icon-s-custom"></i> 司机细信息管理
      </el-menu-item>
      <el-menu-item index="2-2" @click="changeMenu(`/driver_account_details`)">
        <i class="el-icon-document"></i> 司机订单管理
      </el-menu-item>
      <el-menu-item index="2-3" @click="changeMenu(`/driverra_account_detail`)">
        <i class="el-icon-wallet"></i> 司机账户详情
      </el-menu-item>
    </el-submenu>
    <!--  -->
    <div class="margin-top-class"></div>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-s-order"></i>
        <span slot="title">订单</span>
      </template>
      <el-menu-item index="3-1" @click="changeMenu(`/order_info`)">
        <i class="el-icon-document-checked"></i> 订单信息管理
      </el-menu-item>
      <el-menu-item index="3-2" @click="changeMenu(`/orderbill`)">
        <i class="el-icon-coin"></i> 订单分帐管理
      </el-menu-item>
      <el-menu-item index="3-3" @click="changeMenu(`/orderprofitsharing`)">
        <i class="el-icon-tickets"></i> 订单账单详情
      </el-menu-item>
    </el-submenu>

    <div class="margin-top-class"></div>

    <!--创建一个优惠卷 -->

    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-discount"></i>
        <span slot="title">优惠券</span>
      </template>
      <el-menu-item index="4-1" @click="changeMenu(`/couponinfo`)">
        <i class="el-icon-document"></i> 优惠券信息管理
      </el-menu-item>
      <el-menu-item index="4-2" @click="changeMenu(`/customercoupon`)">
        <i class="el-icon-wallet"></i> 乘客优惠券分账管理
      </el-menu-item>
    </el-submenu>

    <div class="margin-top-class"></div>

    <!-- 规则设置 -->

    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span slot="title">规则</span>
      </template>
      <el-menu-item index="5-1" @click="changeMenu(`/cancel_rule`)">
        <i class="el-icon-close-notification"></i> 取消规则设置
      </el-menu-item>
      <el-menu-item index="5-2" @click="changeMenu(`/fee_rule`)">
        <i class="el-icon-money"></i> 费用规则
      </el-menu-item>
      <el-menu-item index="5-3" @click="changeMenu(`/profitsharingrule`)">
        <i class="el-icon-bank-card"></i> 分账规则
      </el-menu-item>
      <el-menu-item index="5-4" @click="changeMenu(`/rewardrule`)">
        <i class="el-icon-star-on"></i> 奖励规则
      </el-menu-item>
    </el-submenu>

    <div class="margin-top-class"></div>



    <el-submenu index="6">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span slot="title">系统设置</span>
      </template>
      <el-menu-item index="6-1" @click="changeMenu('/sysdept')">
        <i class="el-icon-s-custom"></i> 部门管理
      </el-menu-item>
      <el-menu-item index="6-2" @click="changeMenu('/sysloginlog')">
        <i class="el-icon-s-order"></i> 登录日志
      </el-menu-item>
      <el-menu-item index="6-3" @click="changeMenu('/sysmenu')">
        <i class="el-icon-menu"></i> 菜单管理
      </el-menu-item>
      <el-menu-item index="6-4" @click="changeMenu('/sysoperlog')">
        <i class="el-icon-document"></i> 操作日志
      </el-menu-item>
      <el-menu-item index="6-5" @click="changeMenu('/syspost')">
        <i class="el-icon-user"></i> 岗位管理
      </el-menu-item>
      <el-menu-item index="6-6" @click="changeMenu('/sysrole')">
        <i class="el-icon-s-check"></i> 角色管理
      </el-menu-item>
      <el-menu-item index="6-7" @click="changeMenu('/sysrolemenu')">
        <i class="el-icon-s-operation"></i> 角色权限分配
      </el-menu-item>
      <el-menu-item index="6-9" @click="changeMenu('/sysuserrole')">
        <i class="el-icon-s-tools"></i> 用户角色分配
      </el-menu-item>
      <el-menu-item index="6-10" @click="changeMenu('/undolog')">
        <i class="el-icon-refresh-left"></i> 数据回滚日志
      </el-menu-item>
      <el-menu-item index="6-11" @click="changeMenu('/sysuser')">
        <i class="el-icon-refresh-left"></i> 系统用户
      </el-menu-item>
    </el-submenu>

    <div class="margin-top-class"></div>





    <!-- system-setting -->
    <el-menu-item index="10" @click="changeMenu('/system-setting')">
      <i class="el-icon-s-tools"></i>
      <span slot="title">个人反馈</span>
    </el-menu-item>
    <div class="margin-top-class"></div>
    <!--    其他 -->
    <el-menu-item index="9" @click="changeMenu('/other_setting')">
      <i class="el-icon-s-tools"></i>
      <span slot="title">其他</span>
    </el-menu-item>

    <div style="width: 100px;height: 100px"></div>
  </el-menu>
</template>

<style lang="less" scoped>
.margin-top-class {
  padding-top: 20px;
  /* 用 padding-top 替代 margin-top */
  background-color: #545C64;
}

.el-menu-itempassword {
  margin-bottom: 20px;
}

.el-menu-items {
  margin-top: 20px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  height: 130vh;
  // Aside和Header之间没有边框缝隙
  border-right: none;

  h3 {
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>

<script>
import { Icon } from "element-ui";
import cookie from "js-cookie";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    changeMenu(path) {
      // 跳转
      // this.$store.state.tabList.push({path: path,name: path.splice("/",""),icon:'icon-user' ,label: 'sdasd',url:path })
       if (path==='/other_setting')
       {
         this.$message.info('该功能系统正在维护当中')
         return
       }
      this.$router.push(path);
      // 面包屑
      const   obj  =   {
        path: path,
        name: path.replace('/',''),
        label: path.replace('/',''),
        icon: 'icon-weiwangguanicon-defuben-',
        url: path.replace('/','')
      };

      this.$store.commit("SelectMenu", obj);
      // 在这个地方把这个路由添加到这个tablelist当中去
      // console.log(path);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickItem(item) {
      // 防止自己跳自己的报错
      if (
        this.$route.path !== item.path &&
        !(this.$route.path === "/home" && item.path === "/")
      ) {
        console.log(item.path);

        this.$router.push(item.path);
      }
      // 面包屑
      this.$store.commit("SelectMenu", item);
    },
  },
  computed: {
    noChildren() {
      // 如果没有children则返回true,会被过滤器留下
      return this.MenuData.filter((item) => !item.children);
    },
    hasChildren() {
      return this.MenuData.filter((item) => item.children);
    },
    // 要放到计算属性,自动计算
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
    // 获取菜单
    MenuData() {
      return JSON.parse(cookie.get("menu")) || this.$store.state.tab.menu;
    },
  },
};
</script>